<template>
  <div>
    <Editor v-model="tinymceValue" :init="editorInit" />
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
tinymce.baseURL = '/tinymce' // 解决控制台警告

import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/icons/default/icons.min.js'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/table'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/link'
// axupimgs 是个多图上传插件  由于 npm 安装依赖包的时候没有带(最新版本也没带) 所以放在了public下的plugins

import { uploadNormalFile } from '@/api/QiuNiu.js'
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myValue: '',
      editorInit: {
        language_url: '/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 400,
        plugins: 'image table axupimgs fullscreen link',
        toolbar:
          'undo redo | toolbar bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | image axupimgs link table| removeformat fullscreen',
        images_upload_handler: (blobInfo, success, failure) => {
          // 单图与多图上传 都用此方法
          uploadNormalFile(blobInfo.blob(), (res) => {
            if (typeof res !== 'number') success(res)
          })
        },
        image_dimensions: false,
        statusbar: true, // 底部的状态栏
        menubar: false, // 最上方的菜单
        branding: false, // 去掉水印 Powered by TinyMCE
        toolbar_mode: 'wrap' // 工具栏抽屉模式 floating / sliding / scrolling / wrap
      }
    }
  },
  computed: {
    tinymceValue: {
      get() {
        return this.value
      },
      set(nv) {
        this.$emit('input', nv)
      }
    }
  }
}
</script>

<style lang="scss">
// 解决 富文本组件在 el-dialog 中的层级问题
.tox-tinymce-aux {
  z-index: 5000 !important;
}

</style>
